import { useEffect, useRef, useState } from "react";

const UseRefComponent = () => {
    const [count, setCount] = useState(0)
    const divDom = useRef()

    // let timeId;
    // useEffect(() => {
    //     console.log(divDom)
    //     timeId = setInterval(() => {
    //         setCount((count) => count + 1)
    //     }, 1000)
    // }, [])
    // const stopCount = () => {
    //     console.log(timeId)
    //     clearInterval(timeId)
    // }

    const timeId = useRef()

    useEffect(() => {
        console.log(divDom)
        timeId.current = setInterval(() => {
            setCount((count) => count + 1)
        }, 1000)
    }, [])

    const stopCount = () => {
        clearInterval(timeId.current)
    }
    return (
        <div>
            <h1>useRef</h1>
            <div ref={divDom}></div>
            <p>{count}</p>
            <button onClick={() => setCount(count + 1)} >计数</button>
            <button onClick={stopCount}>停止计数</button>
        </div>
    )
}

export default UseRefComponent